<template>
	<view class="meau" :style="{height:height}">
		<!-- 头部 搜索结构start -->
		<view class="nav">
			<view class="nav-box">
				<uni-icons type="search" color="#0c34ba" size="18"></uni-icons>
				<input type="text" value="" confirm-type="search" v-model="searchText" @confirm="useSearch"
					placeholder="请输入关键字" class="ipt" />
			</view>
		</view>
		<!-- 头部 搜索结构end -->
		<!-- 滑动导航结构 start -->
		<view class="scroll-parent">

			<view class="scroll">
				<view class="scroll-box" v-for="(v,i) in typeList" @click="typeLight(i,v)">
					<view class="img-box">
						<image :src="i===count?typeList[0].arr[i].selectIcon:typeList[0].arr[i].icon" mode="widthFix"
							class="img"></image>
					</view>
					<view class="scroll-name" :class="{active:i===count}">
						{{v.typeDesc}}
					</view>
				</view>
			</view>
		</view>
		<!-- 滑动导航结构 end -->
		<!--商品结构 statr -->
		<view class="product" v-for="(item,index) in productList" :key="item.id" @click="toDo(item)">
			<view class="product-left">
				<view class="img-box">
					<image :src="item.largeImg" mode="widthFix center" class="img"></image>
				</view>
				<view class="product-text">
					<view class="product-name">
						{{item.name}}
					</view>
					<view class="product-enname">
						{{item.enname}}
					</view>
				</view>
			</view>
			<view class="product-right">
				{{item.price}}
			</view>
		</view>
		<!--商品结构 end -->

	</view>
</template>

<script>
	export default {
		data() {
			return {
				searchText: '', //搜索关键字
				isHot: {
					typeDesc: "推荐",
					id: 0
				},
				typeList: [],
				iconList: [{
						title: "isHot",
						icon: "https://z3.ax1x.com/2021/09/10/hXiRbD.gif",
						selectIcon: "https://z3.ax1x.com/2021/09/10/hXFei9.gif"
					},
					{
						title: "latte",
						icon: "https://z3.ax1x.com/2021/09/10/hXFtJA.gif",
						selectIcon: "https://z3.ax1x.com/2021/09/10/hXFdQP.gif"
					},
					{
						title: "coffee",
						icon: "https://z3.ax1x.com/2021/09/10/hXFwsf.gif",
						selectIcon: "https://z3.ax1x.com/2021/09/10/hXFrdg.gif"
					},
					{
						title: "rena_ice",
						icon: "https://z3.ax1x.com/2021/09/10/hXFcJs.gif",
						selectIcon: "https://z3.ax1x.com/2021/09/10/hXF7FJ.gif"
					},
					{
						title: "fruit_tea",
						icon: "https://z3.ax1x.com/2021/09/10/hXFOQx.gif",
						selectIcon: "https://z3.ax1x.com/2021/09/10/hXFzwD.png"
					},
				],
				count: 0,
				productList: [],
				height: ''
			}
		},
		onLoad() {
			this.getType()
			this.getProduct(0)
		},
		onReachBottom() {
			this.change()
		},
		methods: {
			// 搜索
			useSearch() {
				uni.navigateTo({
					url: `../search/search?text=${this.searchText}`
				})
			},
			// 获取类型
			getType() {
				uni.request({
					url: "http://www.kangliuyong.com:10002/type",
					data: {
						appkey: "U2FsdGVkX19WSQ59Cg+Fj9jNZPxRC5y0xB1iV06BeNA="
					},
					success: (res) => {
						if (res.statusCode === 200) {

							this.typeList = res.data.result
							this.typeList.unshift(this.isHot)
							this.typeList[0].arr = this.iconList
						}
					}
				})
			},
			//接受参数 
			typeLight(i, v) {
				if (this.count === i) {
					return
				}
				this.count = i
				this.getProduct(i, v)
				//
				this.change()
			},
			getProduct(i, v) {
				let keys = ""
				let value = ""

				if (i === 0) {
					keys = "isHot"
					value = "1"
				} else {
					//其他类型的 数据
					keys = "type"
					value = v.type
				}
				uni.showLoading({
					title: "正在加载...",
					mask: true
				})

				this.$request({
					url: '/typeProducts',
					data: {
						key: keys,
						value: value
					},
					success: res => {
						if (res.statusCode === 200) {
							this.productList = res.data.result
							uni.hideLoading()
						}
					}
				})

			},
			//动态生成高度
			change() {
				let height = this.productList.length * 21
				if (height < 100) {
					this.height = 100 + 'vh'
				} else {
					this.height = height + 'vh'
				}

			},
			toDo(item) {
				uni.navigateTo({
					url: `../detail/detail?pid=${item.pid}`
				})
			}
		},
	}
</script>

<style lang="less" scoped>
	.meau {
		height: 100vh;
		background-color: #f2f2f2;

		// 搜索样式
		.nav {
			height: 100rpx;
			padding: 0 30rpx;
			background-color: #fff;
			display: flex;
			align-items: center;

			.nav-box {
				height: 70rpx;
				border-radius: 50rpx;
				padding: 0 30rpx;
				background-color: #f2f2f2;
				display: flex;
				align-items: center;

				.ipt {
					width: 590rpx;
				}
			}
		}

		.scroll-parent {
			// 新属性 可检测滚动条
			position: sticky;
			top: 0;
			height: 160rpx;
			margin-top: 30rpx;
			overflow: hidden;
			z-index: 99;

			.scroll {
				height: 180rpx;
				padding: 10rpx 0;
				padding-bottom: 0;
				background-color: #fff;
				display: flex;
				overflow-x: auto;

				.scroll-box {
					width: 200rpx;
					flex-shrink: 0;

					.img-box {
						width: 80rpx;
						height: 80rpx;
						margin: 0 35rpx;

						.img {
							width: 100%;
						}
					}

					.scroll-name {
						width: 150rpx;
						text-align: center;
					}
				}
			}
		}

		.active {
			color: #0c34ba;
		}

		.product {
			border-radius: 20rpx;
			padding: 20rpx;
			margin: 30rpx;
			background-color: #fff;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.product-left {
				display: flex;
				align-items: center;
				flex: 8;

				.img-box {
					width: 160rpx;
					height: 160rpx;

					.img {
						width: 100%;
						height: 100%;
					}
				}

				.product-text {
					margin-left: 30rpx;

					.product-name {
						font-size: 34rpx;
					}

					.product-enname {
						width: 340rpx;
						height: 50rpx;
						font-size: 34rpx;
						text-align: start;
						// 单行显示
						display: -webkit-box;
						white-space: pre-wrap;
						overflow: hidden;
						text-overflow: ellipsis;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 1;
					}
				}
			}

			.product-right {
				color: #0c34ba;
				font-size: 34rpx;
				font-weight: bold;
				flex: 2;
			}
		}
	}
</style>
